<script lang="ts" setup>
import { onMounted,ref,reactive } from 'vue';
import {appWindow} from '@tauri-apps/api/window'
import {writeText,readText,readImage,writeImage,} from "tauri-plugin-clipboard-api";
onMounted(async ()=>{
    document.getElementById("titlebar-minimize")?.addEventListener('click',function(){
      console.log(1)
        appWindow.minimize();
    })    

    document.getElementById("titlebar-maximize")?.addEventListener("click",function(){
        appWindow.toggleMaximize()
    })

    document.getElementById("titlebar-close")?.addEventListener("click",function(){
        appWindow.hide();
    })
    a();
})

const a = function(){
let canvas:any = document.querySelector("canvas");

// Optional frames per second argument.
let stream = canvas.captureStream(25);
let recordedChunks:any = [];

console.log(stream);
let options = { mimeType: "video/webm; codecs=vp9" };
let mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event:any) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // ...
  }
}
function download() {
  let blob = new Blob(recordedChunks, {
    type: "video/webm"
  });
  let url = URL.createObjectURL(blob);
  let a:any = document.createElement("a");
  document.body.appendChild(a);
  // a.style = "display: none";
  a.innerHtml = "123";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout(event => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);
}


</script>

<template>
 <div data-tauri-drag-region class="titlebar">
    <div data-tauri-drag-region style="display: flex;align-items: center;justify-content: start;width: calc(100vw - 105px);padding-left: 20px;box-sizing: border-box;">
      设置
    </div>
    <!-- 窗口操作 -->
    <div class="titlebar-button" id="titlebar-minimize">
      <img class="title-icon" src="/icon/zuixiaohua-1.png"
      alt="最小化"
      />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img class="title-icon" src="/icon/zuidahua-1.png"
      alt="最大化"
      />
    </div>
    <div class="titlebar-button" id="titlebar-close">
      <img class="title-icon" src="/icon/guanbi1.png" alt="关闭" />
    </div>
  </div>
  <div style="height: 40px;"></div>
  <canvas></canvas>
</template>

<style scoped>
.title-icon {
  width:30px;
  height:30px;
  padding: 5px;
  box-sizing: border-box;
}

.titlebar {
  width: 100vw;
  height: 30px;
  user-select: none;
  display: flex;
  z-index: 99;
  flex-direction: row;
  justify-content: end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: gray;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 30px;
}
.titlebar-button:hover {
  background: #5bbec3;
}


</style>